<template>
  <view class="container">
    <view class="content">
      <view class="content-top">
        <view class="content-top-one d-rn d-ac d-jb" @click="handleOpenTime">
          <text>{{ $t('选择排班形式') }}</text>
          <view class="content-top-one-right d-rn d-ac">
            <text v-if="paibanxingshi">{{ paibanxingshi }}</text>
            <text v-else>{{$t('选择排班形式')}}</text>
            <image src="../../static/img/right.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>

    <view class="mains" style="margin-top: 24rpx" v-show="paibanxingshiid === 1">
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('shift') }}</text>
        </view>
        <scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrt" :enable-flex="true"
          :show-scrollbar="false" class="scrollview-box">
          <view class="mains-all-one">
            <text @click="handleGourl(item, index)" :id="'minCla' + index" v-for="(item, index) in banciList"
              :key="index" :class="item.sts ? 'actives' : 'outactives'">{{ item.classesName }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="mains" v-show="paibanxingshiid === 0">
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('cycle_shift') }}</text>
        </view>
        <scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrtShiftGroup" :enable-flex="true"
          :show-scrollbar="false" class="scrollview-box">
          <view class="mains-all-one">
            <text @click="handleShiftGroup(index)" :id="'shiftGroup' + index" v-for="(item, index) in cycleShiftList"
              :key="index" :class="activeCycleShif == index ? 'actives' : 'outactives'">{{ item.cycleName }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="mains">
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{$t('shift_type')}}</text>
        </view>
        <scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrts" :enable-flex="true"
          :show-scrollbar="false" class="scrollview-box">
          <view class="mains-all-one">
            <text @click="handleGourls(index)" :id="'minClas' + index" v-for="(item, index) in numList" :key="index"
              :class="tabNums == index ? 'actives' : 'outactives'">{{ item.name }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="" style="background-color: #fff" v-if="!tabNums">
      <view class="">
        <u-calendar ref="calendar" :maxDate="maxDate" :minDate="minDate" :nowMonth="nowMonth" @changeYear="changeYear"
          :yearsNum="yearsNum" @handleGetRiFather="handleGetRiFather" :mode="mode"></u-calendar>

      </view>
    </view>

    <view class="mei" v-else>
      <view class="content">
        <view class="content-top">
          <view class="content-top-one d-rn d-ac d-jb" @click="handlestartTime">
            <text>{{ $t('start_time') }}</text>
            <view class="content-top-one-right d-rn d-ac">
              <text v-if="startTime">{{ startTime }}</text>
              <text v-else>{{ $t('start_time_placeholder') }}</text>
              <image src="../../static/img/right.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="content-top">
          <view class="content-top-one d-rn d-ac d-jb" @click="handleendTime">
            <text>{{ $t('end_time') }}</text>
            <view class="content-top-one-right d-rn d-ac">
              <text v-if="endTime">{{ endTime }}</text>
              <text v-else>{{ $t('end_time_placeholder') }}</text>
              <image src="../../static/img/right.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <view class="d-rn" style="margin-top: 40rpx">
        <view class="mei-left">
          <text>{{ $t('every_time') }}</text>
        </view>
        <view class="mei-right">
          <view class="mei-right-list d-rw d-ac">
            <view class="mei-right-list-one" v-for="(item, index) in weekList" :key="index"
              @click="handleChangeItems(item)">
              <image :src="item.sts
          ? '../../static/img/comfirm.png'
          : '../../static/img/notConfirm.png'
          " mode="">
              </image>
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="choose">
      <view class="choose-title">
        <text>{{$t('select_member')}}</text>
      </view>
      <view class="choose-list d-rw d-ac">

        <view class="choose-list-one" v-for="(item, index) in numberList" :key="index">
          <!-- <image
            :src="baseUrl + item.avatar"
            mode=""
            @click="handleAdd(item, index)"
            v-if="item.avatar"
          ></image> -->
          <view v-if="item.employeeName" class="view">
            {{ item.employeeName }}
          </view>
          <image class="image_add" :src="item.mo" mode="" @click="handleAdd(item, index)" v-else></image>
          <image class="image_remove" src="../../static/img/close3.png" v-if="item.employeeName"
            @click="handleDel(index)">
          </image>
        </view>
      </view>
    </view>

    <view class="">
      <u-picker :show="showTime" :columns="paiType" keyName="label" @cancel="cancel"
        @confirm="handleChooseTime"></u-picker>
    </view>

    <view class="">
      <u-datetime-picker :show="showStartTime" v-model="value1" mode="date" @cancel="handleCancel"
        @confirm="handleChooseStartTime">
      </u-datetime-picker>
    </view>
    <view class="">
      <u-datetime-picker :show="showEndTime" v-model="value1" mode="date" @cancel="handleCancel"
        @confirm="handleChooseEndTime">
      </u-datetime-picker>
    </view>

    <menList ref="handleMem" @handleSuccess="handleSuccess"></menList>

    <div class="footer d-rn d-ac d-jc" @tap="handleConfirm">
      <text class="d-rn d-ac d-jc">{{ $t('confirm') }}</text>
    </div>
    <!-- 选择年份 -->
    <u-picker :show="changeYearShow" :columns="columns" @cancel="changeYearShow = false" @confirm="changeYearConfirm"
      :defaultIndex="defaultIndex"></u-picker>

  </view>
</template>

<script>
var _self;
import {
  classesList,
  employeeList,
  batchUpdate,
  getCycleShiftAll,
} from "../../api/index.js";
import menList from "./menber.vue";
import request from "@/request/config.js";
export default {
  components: {
    menList,
  },
  data() {
    return {
      yearsNum: '',
      changeYearShow: false,
      columns: [
        [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045]
      ],
      value1: Number(new Date()),
      showStartTime: false,
      showEndTime: false,
      baseUrl: request.baseUrl,
      paiType: [
        [
          {
            label: this.$t('cycle_schedule'),
            id: 0,
          },
          {
            label: this.$t('shift_schedule'),
            id: 1,
          },
        ],
      ],
      showTime: false,
      paibanxingshi: "",
      paibanxingshiid: "",
      numList: [
        {
          name: this.$t('month_schedule'),
          id: 0,
        },
        {
          name: this.$t('cycle_schedule_cycle'),
          id: 1,
        },
      ],
      tabNum: 0,
      // 中部分类==选择
      minCla: 0,
      shiftGroup: 0,
      // 底部分类滑动描点
      minSelCrt: null,
      minSelCrtShiftGroup: null,
      value: Number(new Date()),
      listss: [
        {
          month: "1",
          date: [
            {
              day: "1",
              sts: 0,
            },
            {
              day: "2",
              sts: 1,
            },
            {
              day: "3",
              sts: 2,
            },
            {
              day: "4",
              sts: 3,
            },
            {
              day: "5",
              sts: 4,
            },
          ],
        },
      ],

      tabNums: 0,
      // 中部分类==选择
      minClas: 0,
      // 底部分类滑动描点
      minSelCrts: null,
      weekList: [
        {
          label: this.$t('monday1'),
          id: "MONDAY",
          sts: false,
        },
        {
          label: this.$t('tuesday1'),
          id: "TUESDAY",
          sts: false,
        },
        {
          label: this.$t('wednesday1'),
          id: "WEDNESDAY",
          sts: false,
        },
        {
          label: this.$t('thursday1'),
          id: "THURSDAY",
          sts: false,
        },
        {
          label: this.$t('friday1'),
          id: "FRIDAY",
          sts: false,
        },
        {
          label: this.$t('saturday1'),
          id: "SATURDAY",
          sts: false,
        },
        {
          label: this.$t('sunday1'),
          id: "SUNDAY",
          sts: false,
        },
      ],
      numberList: [
        {
          avatar: "",
          mo: "../../static/img/add.png",
          showDel: false,
          iconAdd: true,
        },
      ],
      needYear: "",
      maxDate: "",
      minDate: "",
      nowMonth: null,
      mode: "multiple",
      acceptDate: [],
      year: "",
      bList: [],
      typeSts: false,
      banciList: [],
      memberList: [],
      newArray: [],
      menIndex: "",
      banciId: [],
      paibanYueLiList: [],
      numberListId: [],
      startTime: "",
      endTime: "",
      weekly: [],
      form: {},
      cycleShiftList: [],
      cycleShiftId: null,
      activeCycleShif: null,
      employerId: uni.getStorageSync("curEmployerId"),
      defaultIndex: [],
      selectDateList: [],
    };
  },
  onLoad() {
    _self = this;
  },
  onShow() {
    var today = new Date();
    var year = today.getFullYear();
    _self.year = year;
    _self.yearsNum = year;
    this.defaultIndex = [this.columns[0].findIndex(v => v == this.year)]
    _self.nowMonth = today.getMonth();
    _self.maxDate = year + "-12-31";
    _self.minDate = year + "-1-1";
    _self.getclassesList();
    _self.getemployeeList();
    this.getCycleShiftAll();
  },
  methods: {
    changeYearConfirm(e) {
      console.log('e', e);
      this.yearsNum = e.value[0];
      this.changeYearShow = false;
      this.yearMonthDay = `${this.year}-${this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
        }-${this.dayNum}`;
      _self.getclassesList();
      _self.getemployeeList();
      this.getCycleShiftAll();
    },
    changeYear(flag) {
      this.changeYearShow = flag;
      console.log('点击了年份')
    },
    getCycleShiftAll() {
      getCycleShiftAll().then((res) => {
        this.cycleShiftList = res.data;
      });
    },
    cancel() {
      _self.showTime = false;
    },
    handlestartTime() {
      _self.showStartTime = true;
    },
    handleendTime() {
      _self.showEndTime = true;
    },
    handleChooseStartTime(e) {
      _self.showStartTime = false;
      _self.startTime = _self.$commonFun.timestampToTimeDate(e.value);
    },
    handleChooseEndTime(e) {
      _self.showEndTime = false;
      _self.endTime = _self.$commonFun.timestampToTimeDate(e.value);
    },
    getemployeeList() {
      employeeList({
        employerId: this.employerId,
      }).then((res) => {
        _self.newArray = res.data.records;
        _self.newArray.forEach((item) => {
          item.iconSts = false;
        });
      });
    },
    // 班次
    getclassesList() {
      classesList().then((res) => {
        _self.banciList = res.data;
        if (_self.banciList && _self.banciList.length) {
          _self.banciList.forEach((item) => {
            item.sts = false;
            this.$set(item, "classesName", item.shiftName);
          });
        }
      });
    },
    handleOpenTime(e) {
      _self.showTime = true;
    },
    handleChooseTime(e) {
      _self.showTime = false;
      _self.paibanxingshi = e.value[0].label;
      _self.paibanxingshiid = e.value[0].id;
    },
    handleCancel() {
      _self.showTime = false;
      _self.showStartTime = false;
      _self.showEndTime = false;
    },
    handleShiftGroup(index) {
      this.$set(this, "activeCycleShif", index);
      this.cycleShiftId = this.cycleShiftList[index].id;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrtShiftGroup = "shiftGroup" + (index - 1);
        });
      }
      this.$forceUpdate();
    },
    handleGourl(val, index) {
      val.sts = !val.sts;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrt = "minCla" + (index - 1);
        });
      }
      this.$forceUpdate();
    },
    handleGourls(index) {
      this.tabNums = index;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrts = "minClas" + (index - 1);
        });
      }

      _self.weekList.forEach((item) => {
        item.sts = false;
      });
      _self.startTime = "";
      _self.endTime = "";
    },
    handleGetRiFather(e) {
      console.log('eeee', e)
      // if ((e.month + 1) < 10) {
      // 	e.month = '0' + (e.month + 1)
      // }
      // if (e.day < 10) {
      // 	e.day = '0' + e.day
      // }
      // let a;
      // a = _self.year + '-' + e.month + '-' + e.day
      // _self.bList.push(a)
      // _self.acceptDate = _self.bList.filter((item, index) => _self.bList.indexOf(item) == index)
      // this.$forceUpdate()
      this.paibanYueLiList = e;
      this.selectDateList = e;
    },
    handleChangeItems(item) {
      item.sts = !item.sts;
      _self.$forceUpdate();
    },
    handleAdd(item, index) {
      _self.menIndex = index;
      _self.$refs.handleMem.handleOpen(_self.newArray);
      // if (item.iconAdd) {
      // 	_self.numberList.unshift({
      // 		icon: '../../static/img/data.png',
      // 		showDel: true,
      // 		iconAdd: false,
      // 	})
      // }
    },
    handleDel(index) {
      _self.numberList.splice(index, 1);
      if (_self.numberList.length == 0) {
        _self.numberList.push({
          avatar: "",
          mo: "../../static/img/add.png",
          showDel: false,
          iconAdd: true,
        },)
      }
      this.$forceUpdate();

    },
    handleSuccess(e) {
      _self.numberList = e;
      if (_self.numberList && _self.numberList.length) {
        _self.numberList.forEach((item) => {
          _self.numberListId.push(item.id);
        });
      }
    },
    handleConfirm() {
      if (!_self.paibanxingshi) {
        _self.$commonFun.showTips(this.$t('select_schedule_type'));
        return false;
      }
      if (_self.numberList && !_self.numberList.length) {
        _self.$commonFun.showTips(this.$t('please_select_member'));
        return false;
      }
      _self.banciList.forEach((item) => {
        if (item.sts) {
          _self.banciId.push(item.id);
        }
      });
      if (this.paibanxingshiid === 1 && !_self.banciId.length) {
        _self.$commonFun.showTips(this.$t('please_select_shift'));
        return false;
      }
      if (this.paibanxingshiid === 0 && _self.cycleShiftId === null) {
        _self.$commonFun.showTips(this.$t('please_select_cycle_shift'));
        return false;
      }

      if (_self.numberListId && !_self.numberListId.length) {
        _self.$commonFun.showTips(this.$t('please_select_member'));
        return false;
      }
      let startTime, endTime;
      if (!_self.tabNums) {
        console.log('月历排班', this.selectDateList)
        if (this.selectDateList.length) {
          startTime = this.paibanYueLiList.at(0);
          endTime = this.paibanYueLiList.at(-1);
        }
        // 月历排班
        if (this.paibanYueLiList && this.paibanYueLiList.length) {
          this.paibanYueLiList = this.paibanYueLiList.map(v => {
            v = this.yearsNum + v.slice(4)
          })

        }
        this.form = {
          scheduleForm: _self.paibanxingshiid,
          classesId: _self.banciId,
          cycleId: this.cycleShiftId,
          scheduleMethod: _self.tabNums,
          cycleDateList: _self.selectDateList,
          employerId: this.employerId,
          empIds: _self.numberListId,
          startTime,
          endTime,

        };
        console.log('form', this.form)
      } else {
        if (!_self.startTime) {
          _self.$commonFun.showTips(this.$t('please_select_start_time'));
          return false;
        }
        if (!_self.endTime) {
          _self.$commonFun.showTips(this.$t('please_select_end_time'));
          return false;
        }
        _self.weekList.forEach((item) => {
          if (item.sts) {
            _self.weekly.push(item.id);
          }
        });
        if (_self.weekly && !_self.weekly.length) {
          _self.$commonFun.showTips(this.$t('please_select_cycle_period'));
          return false;
        }
        // 周期
        this.form = {
          scheduleForm: _self.paibanxingshiid,
          classesId: _self.banciId,
          scheduleMethod: _self.tabNums,
          empIds: _self.numberListId,
          endTime: _self.endTime,
          startTime: _self.startTime,
          weeklyList: _self.weekly,
        };
      }
      uni.showModal({
        title: this.$t('prompt'),
        content: this.$t('submit_confirm'),
        cancelColor: '#353535',
        confirmColor: '#215AA0',
        cancelText: '取消',
        // showCancel: false,
        confirmText: '确认',
        success: function (res) {
          if (res.confirm) {
            batchUpdate(_self.form).then((res) => {
              if (res.code == 200) {
                _self.$commonFun.showTips(this.$t('scheduling_success'));
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000);
              }
            });
          } else if (res.cancel) { }
        }
      })

    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;

  .footer {
    width: 100%;
    margin-top: 60rpx;
    position: relative;
    z-index: 10;

    text {
      width: 90%;
      height: 80rpx;
      background-color: rgb(255, 208, 61);
      border-radius: 2em;
    }
  }

  .content {
    width: 100%;

    &-top {
      background-color: #ffffff;

      &-one {
        padding: 30rpx 24rpx;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;

        text {
          font-size: 28rpx;
          color: #6c6c6c;
        }

        image {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }

  .mains {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;

    &-all {
      width: 80%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      font-size: 16px;
      text-align: center;
      white-space: nowrap;

      scroll-view {
        width: 90%;
      }

      &-one {
        width: 80%;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        padding: 0 20rpx;
        box-sizing: border-box;

        text {
          margin-right: 40rpx;
          font-size: 26rpx;
          color: #333333;
        }

        .actives {
          color: #333333;
          padding: 6rpx 10rpx;
          box-sizing: border-box;
          background-color: #fef9e7;
          border: 1px solid #fedb3a;
          border-radius: 2em;
        }
      }

      &-title {
        padding: 22rpx 34rpx;
        box-sizing: border-box;

        text {
          display: inline-block;
          width: 120rpx;
          font-size: 28rpx;
          color: #333333;
          text-align: left;
        }
      }
    }
  }

  .mei {
    width: 100%;
    margin-top: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    &-left {
      width: 120rpx;

      text {
        font-size: 28rpx;
        color: #333333;
      }
    }

    &-right {
      &-list {
        &-one {
          margin-right: 20rpx;
          margin-bottom: 20rpx;

          image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 16rpx;
          }

          text {
            font-size: 26rpx;
            color: #333333;
          }
        }
      }
    }
  }

  .choose {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 20rpx;

    &-title {
      margin-bottom: 20rpx;

      text {
        font-size: 28rpx;
        color: #333333;
      }
    }

    &-list {
      &-one {
        margin-right: 20rpx;
        position: relative;

        .view {
          padding-left: 10rpx;
        }

        .image {
          &_add {
            width: 90rpx;
            height: 90rpx;
          }

          &_remove {
            position: absolute;
            top: -7%;
            left: 100%;
            width: 24rpx;
            height: 24rpx;
          }
        }


      }

      &:first-child {
        .view {
          padding: 0;
        }
      }
    }
  }
}
</style>
